<template>
	<v-forms ref="formRef" :beforeHandler="(param: any) =>beforeHandler(param)">
		<template #table="scopes">
			<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
				<v-table :data-list="personInfoList" v-bind="editeInfoTableConfig">
					<template #footer>
						<div style="display: flex; justify-content: center">
							<el-button class="icon-e" icon="ele-CirclePlus" text type="primary" @click="addClick"> {{ $t('sf7FdRax4j7pC9Pcj42uG') }} </el-button>
						</div>
					</template>

					<template #n_EmpId="scope">
						<template v-if="scope.row['isServeData']">{{ scope.row['v_EmpName'] }} </template>
						<template v-else>
							<el-select
								style="width: 110px"
								v-model="scope.row[scope.prop.slotName]"
								filterable
								remote
								:placeholder="$t('wjcetHfOu5NsJJwvqIqGx')"
								remote-show-suffix
								:remote-method="remoteMethodShield"
								@focus="remoteMethodShield"
							>
								<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</template>
					</template>
					<template #v_CourseName>
						<div style="font-size: 12px; text-align: center">
							{{ data.v_CourseName }}
						</div>
					</template>
					<template #v_EmpName>
						<div style="font-size: 12px; text-align: center">
							{{ data.v_EmpName }}
						</div>
					</template>
					<template #v_AssessmentMethod>
						<div style="font-size: 12px; text-align: center">
							{{ data.v_AssessmentMethod }}
						</div>
					</template>
					<template #v_TrainAddress>
						<div style="font-size: 12px; text-align: center">
							{{ data.v_TrainAddress }}
						</div>
					</template>
					<template #d_TrainTime>
						<div style="font-size: 12px; text-align: center">
							{{ data.d_TrainTime }}
						</div>
					</template>
					<template #n_TrainingScores="scope">
						<el-input-number :disabled="scope.row['disableScore']" style="width: 115px" :placeholder="$t('lkZqpbGmbF77LouBb2TN')" v-model="scope.row[scope.prop.slotName]" :min="0" />
					</template>
					<template #c_isQualified="scope">
						<div style="font-size: 12px; text-align: center">
							{{ !scope.row['disableScore'] && !scope.row['n_TrainingScores'] && scope.row['n_TrainingScores'] != 0 ? '' : scope.row['n_TrainingScores'] >= data.course.n_Score ? $t('czHzFz4MfjHpk0kRj6pNv') : $t('5kYkCMeW6cPgGc9Xkm0cX') }}
						</div>
					</template>
					<template #d_CompleteTime>
						<div style="font-size: 12px; text-align: center">
							{{ data.d_TrainTime }}
						</div>
					</template>
					<template #operation="scope">
						<el-button icon="ele-Delete" @click="deleteAction(scope.row)" type="danger" size="small" > {{ $t('mkwlMbm3qr88f0XxV9Pje') }} </el-button>
					</template>
				</v-table>
			</el-card>
		</template>
	</v-forms>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { editeTrainFormConfig, VForms, editeInfoTableConfig } from '../config/index';
import vTable from '/@/components/table/v-table.vue';
import { postDeleteTrainEmp } from '/@/api/safety-play/planAPI';
import { ElMessageBox, ElMessage } from 'element-plus';
import commonRequest from '/@/api/common/common';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;

const formRef = ref();
let personInfoList: any = ref();
let data: any = ref();

const emit = defineEmits(['deleteAction']);

//检查personInfoList 用户id是否为空
const beforeHandler = async (param: any) => {
	for (let i = 0; i < personInfoList.value.length; i++) {
		const person = personInfoList.value[i];
		if (!person.n_EmpId) {
			ElMessage.warning($t('n6TotuiUl6UcbE2JTzbkR'));
			return Promise.resolve(false);
		}
	}
	return Promise.resolve(true);
};

//详情
const change = (d: any) => {
	data.value = d;
	let list: any = editeTrainFormConfig(data);
	formRef.value.openDialog(list, $t('b4ZGgBxEdO0eAsoy08io'));
	personInfoList.value = [];
	for (let i = 0; i < d.trainEmps.length; i++) {
		let trainEmp = d.trainEmps[i];
		trainEmp.isServeData = true; //isServeData 表示服务器的用户数据
		trainEmp.disableScore = trainEmp.c_isQualified ? true : false; //false表示分数是否允许被改变, true表示不允许
		trainEmp.index = i;
		personInfoList.value.push(trainEmp);
	}
	console.log('personInfoList', personInfoList.value);
};
const options = ref([]);

const remoteMethodShield = async (query: string) => {
	const res = await commonRequest.getUserList({
		EmpName: query,
		IsChoose: false,
	});
	options.value = res.data;
};

const addClick = () => {
	const newData = {
		n_TrainingScores: null,
		c_isQualified: '',
		n_EmpId: '',
		isServeData: false,
		disableScore: false,
		index: personInfoList.value.length,
	};
	personInfoList.value.push(newData);
};

const deleteAction = (data: any) => {
	if (data.isServeData) {
		ElMessageBox.confirm($t('itYcbTIj20MmWuPdBMgvd'), $t('nHdM3UcfLoZbHyqgSa3cx'), {
			confirmButtonText: $t('cpmrq09Mw3tfVmwWGsZzb'),
			cancelButtonText: $t('wFa44E4Iz025Ha2gYeDop'),
			type: 'warning',
			center: true,
		})
			.then(async () => {
				await postDeleteTrainEmp({
					n_Id: data.n_Id,
				});
				//通知页面刷新列表
				personInfoList.value.splice(data.index, 1);
				emit('deleteAction');
			})
			.catch(() => {});
	} else {
		personInfoList.value.splice(data.index, 1);
	}
	let newArray = [];
	for (let i = 0; i < personInfoList.value.length; i++) {
		let person = personInfoList.value[i];
		person.index = i;
		newArray.push(person);
	}
	personInfoList.value = newArray;
};

defineExpose({
	change,
	personInfoList,
});
</script>
<scope lang="scss" scoped></scope>
